<template>
  <div class="teacherCourseInfo">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>课程实验大纲</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="5">
        <div class="">
          <el-input v-model="form.newCourseName" placeholder="请输入课程名称"></el-input>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="">
          <el-input v-model="form.newAcademicYear" placeholder="请输入学年"></el-input>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="">
          <el-input v-model="form.newTerm" placeholder="请输入学期"></el-input>
        </div>
      </el-col>
      <el-col :span="3" :offset="6">
        <div class="overflow-clear">
          <el-button type="primary" class="add-pd-26 float-right" @click="searchCourse">搜索</el-button>
        </div>
      </el-col>
    </el-row>
    <hr>
    <div>
      <div class="table-title-before"></div>
      <el-button-group style="margin-bottom:4px;" class="float-right">
        <el-button type="primary" class="add-pd-26">新增</el-button>
        <el-button type="primary" class="add-pd-26">导入</el-button>
        <el-button type="primary" class="add-pd-26">导出</el-button>
      </el-button-group>
    </div>
    <el-table
      :data="courseInfo|concreteCourse(form.courseName,form.academicYear,form.term)"
      style="width: 100%"
      :default-sort="{prop: 'courseID',order:'ascending'}">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="courseID"
        label="课程编号"
        min-width="120"
        sortable>
      </el-table-column>
      <el-table-column
        prop="courseName"
        label="课程名称"
        min-width="120"
        sortable>
      </el-table-column>
      <el-table-column
        label="课程进度表"
        min-width="120">
        <template scope="scope">
          <el-button type="text">课程实验大纲</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="120">
        <template scope="scope">
          <el-button type="text">下载</el-button>
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'testProgramInfo',
    data() {
      return {
        form: {
          courseName: '',
          academicYear: '',
          term: '',
          newCourseName: '',
          newTerm: '',
          newAcademicYear: ''
        },
        courseInfo: [{
          courseID: 'KC00002',
          courseName: '计算机网络教程',
          academicYear: '2016',
          term: '1',
        },
          {
            courseID: 'KC00001',
            courseName: '数据库结构',
            academicYear: '2015',
            term: '2',
          }],
        currentPage4: 4
      }
    },
    created () {

    },
    methods: {
      res: function () {
        this.$http.get(this.apiUrl)
          .then((res) => {
            this.$set('gridData', res.data)
          })
          .catch(function(err) {
            console.log(err)
          })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
      },
      searchCourse: function () {
        this.form.courseName = this.form.newCourseName
        this.form.academicYear = this.form.newAcademicYear
        this.form.term = this.form.newTerm
      }
    }
    ,
    filters: {
      concreteCourse: function (course, courseName, academicYear, term) {
        var msg = [];
        if (courseName === '' || academicYear === '' || term === '') {
          return course
        }
        for (var i = 0, len = course.length; i < len; i++) {
          if (course[i].courseName === courseName && course[i].academicYear === academicYear && course[i].term === term) {
            msg.push(course[i])
          }
        }
        return msg
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .max-width {
    width: 100% !important;
  }

  .add-pd-26 {
    padding-left: 1.6em;
    padding-right: 1.6em;
  }

  .add-pd-40 {
    padding-left: 2.5em;
    padding-right: 2.5em;
  }

  .margin-b-6 {
    margin-bottom: 7px;
  }

  .margin-t-16 {
    margin-top: 30px;
  }
</style>
